<template>
  <section>
    <el-col :span="24">

    </el-col>
    <el-col :span="24">
      <el-table :data="data" style="width: 100%"  v-loading="loading" :height="tableHeight">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="name" label="用户名">
          <template slot-scope="scope">
            <el-popover
              v-if="scope.row.wechat_online"
              placement="right-start"
              width="200"
              title="微信号"
              trigger="hover">
              <div v-html="scope.row.wechat_id"></div>
              <svg slot="reference" t="1584934099875" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="41032" width="16" height="16"><path d="M0 512a512 512 0 1 0 1024 0A512 512 0 0 0 0 512z" fill="#1BB723" p-id="41033"></path><path d="M831.886222 585.614222c0-90.567111-90.567111-164.352-192.284444-164.352-107.804444 0-192.625778 73.784889-192.625778 164.352 0 90.680889 84.821333 164.295111 192.568889 164.295111 22.528 0 45.283556-5.688889 67.925333-11.377777l62.122667 34.019555-17.009778-56.547555c45.454222-34.133333 79.303111-79.36 79.303111-130.389334z m-254.805333-28.330666a24.348444 24.348444 0 0 1-22.641778-22.698667c0-11.264 11.377778-22.641778 22.641778-22.641778 17.123556 0 28.387556 11.377778 28.387555 22.641778 0 11.434667-11.264 22.698667-28.387555 22.698667z m124.586667 0c-11.207111 0-22.471111-11.264-22.471112-22.698667 0-11.264 11.264-22.641778 22.471112-22.641778 16.952889 0 28.330667 11.377778 28.330666 22.641778 0 11.434667-11.377778 22.698667-28.330666 22.698667z" fill="#FFFFFF" p-id="41034"></path><path d="M418.531556 251.448889c-124.472889 0-226.417778 84.821333-226.417778 192.568889 0 62.179556 33.905778 113.208889 90.624 152.860444l-22.698667 68.096 79.189333-39.708444c28.330667 5.632 51.029333 11.377778 79.303112 11.377778 7.111111 0 14.165333-0.341333 21.162666-0.910223a168.504889 168.504889 0 0 1-6.997333-47.388444c0-98.986667 84.935111-179.2 192.512-179.2 7.338667 0 14.620444 0.512 21.788444 1.308444C627.484444 319.146667 529.92 251.448889 418.531556 251.448889zM344.974222 404.309333c-16.952889 0-34.133333-11.377778-34.133333-28.330666 0-17.066667 17.180444-28.273778 34.133333-28.273778 17.009778 0 28.273778 11.207111 28.273778 28.273778 0 16.952889-11.264 28.330667-28.273778 28.330666z m158.492445 0c-16.952889 0-34.019556-11.377778-34.019556-28.330666 0-17.066667 17.066667-28.273778 34.019556-28.273778 17.066667 0 28.330667 11.207111 28.330666 28.273778 0 16.952889-11.264 28.330667-28.330666 28.330666z" fill="#FFFFFF" p-id="41035"></path></svg>
            </el-popover>
            <span style="margin-left: 3px;">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="注册手机"></el-table-column>
        <el-table-column prop="qq" label="QQ"></el-table-column>
        <el-table-column prop="role" label="角色">
          <template slot-scope="scope">
            {{roleList[scope.row.role] ? roleList[scope.row.role] : scope.row.role}}
          </template>
        </el-table-column>
        <el-table-column prop="effect_time" label="到期时间" width="160"></el-table-column>
        <el-table-column prop="is_effect" label="当前状态"  align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.is_effect" style="color:green;">有效</span>
            <span v-else style="color:red;">失效</span>
          </template>
        </el-table-column>
        <el-table-column prop="token_vip_num" label="剩余次数"  align="center"></el-table-column>
        <el-table-column label="操作" fixed="right" width="240">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="openUserVisible(scope.$index)">设置</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--翻页栏-->
      <div style="margin: 10px;overflow: hidden;float: right;">
        <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
      </div>
    </el-col>

    <!--用户设置-->
    <el-dialog title="用户设置" width="500px" :visible.sync="visible" :close-on-press-escape="false" :close-on-click-modal="false">
      <el-form>
        <el-form-item label="选择角色">
          <el-radio-group v-model="role" size="small">
            <el-radio style="margin-bottom: 16px;" v-for="(label, value) in roleList" :key="value" :label="value">{{label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="软件期限">
          <el-date-picker v-model="effectTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间" size="small"></el-date-picker>
        </el-form-item>
        <el-form-item label="手机换绑">
          <el-input size="small" v-model.trim="phone" style="width: 48%" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="visible=false;" plain>退 出</el-button>
        <el-button type="primary" size="small" @click="updateUser" :loading="userLoading">更 新</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import {userList} from "@/api/user";
import {roleList} from "@/api/sys/role";
import {localRead} from "@/libs/util";

export default {
  data() {
    return {
      searchName: '',
      searchRole: '',
      isValid: '',
      isWechatOnline:'',

      btnLoading:false,
      tokenLoading:false,
      roleVisible: false,
      selectIndex: 0,
      data: [],
      user: {},
      roleList: {},
      tokenVip: [
        {value:1,label:'10'},
        {value:10,label:'100'},
        {value:20,label:'200'},
        {value:50,label:'500'},
        {value:100,label:'1000'}
      ],
      effectDay:[
        {value:3,label:'三天'},
        {value:31,label:'一个月'},
        {value:92,label:'三个月'},
        {value:183,label:'半年'},
        {value:366,label:'一年'}
      ],
      loading: false,
      page: 1,
      limit: 20,
      total: 0,
      tableHeight: window.innerHeight-240,

      //用户设置
      role: '',
      effectTime: '',
      phone: '',
      visible: false,
      userLoading: false,
    }
  },
  methods: {
    // 次数充值弹窗
    rechargeToken(times, index){
      let label = "";
      for(let i=0;i<this.tokenVip.length;i++){
        if(this.tokenVip[i].value == times){
          label = this.tokenVip[i].label;
        }
      }
      this.$confirm(`是否确认充值：【${label}】次？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tokenLoading = true;
        this.selectIndex = index;
        let param = {
          token_vip_num: label,
          name: this.data[index].name
        };
        setTokenVipNum(param).then((res)=>{
          this.tokenLoading = false;
          if(res.code === 0){
            this.$Message.success("提示：已成功充值");
            this.getData();
          }else{
            this.$Message.error(res.msg);
          }
        }).catch(()=>{
          this.tokenLoading = false;
          this.$Message.error("充值失败，请重试！");
        });
      });
    },

    //激活按钮
    activateUser(days, index){
      let label = "";
      for(let i=0;i<this.effectDay.length;i++){
        if(this.effectDay[i].value == days){
          label = this.effectDay[i].label;
        }
      }
      this.$confirm('激活用户：【'+label+'】的使用权，是否激活？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.btnLoading = true;
        this.selectIndex = index;
        let param = {
          days: days,
          name: this.data[index].name
        };
        activate(param).then((res)=>{
          this.btnLoading = false;
          if(res.code === 0){
            this.$Message.success("提示：成功激活");
            this.getData();
          }else{
            this.$Message.error(res.msg);
          }
        }).catch(()=>{
          this.btnLoading = false;
          this.$Message.error("操作失败");
        });
      }).catch(() => {

      });
    },

    //打开设置
    openUserVisible(index){
      this.role = this.data[index].role;
      this.effectTime = this.data[index].effect_time;
      this.phone = this.data[index].phone;
      this.selectIndex = index;
      this.visible = true;
    },

    //设置用户
    updateUser(){
      if(!this.effectTime){
        this.$message.warning("请选择软件期限");
        return;
      }
      let param = {
        name: this.data[this.selectIndex].name,
        role: this.role,
        effectTime: this.effectTime,
        phone: this.phone
      };
      this.userLoading = true;
      setUser(param).then((res) => {
        this.userLoading = false;
        if(res.code === 0){
          this.$message.success("提示：修改用户角色成功");
          this.visible = false;
          this.getData();
        }else{
          this.$message.error(res.msg);
        }
      }).catch(()=>{
        this.userLoading = false;
      });
    },


    searchBtn(){
      this.page = 1;
      this.getData();
    },
    //翻页
    pageChange(page){
      this.page = page;
      this.getData();
    },
    //获取数据
    getData(){
      let param = {
        page: this.page,
        limit: this.limit,
        role: this.searchRole,
        name: this.searchName,
        is_valid: this.isValid,
        is_wechat_online: this.isWechatOnline
      };
      this.loading = true;
      userList(param).then((res) => {
        this.loading = false;
        this.total = res.data.total;
        this.data = res.data.data;
      });
    },
    //获取角色
    getRole(){
      roleList().then((res) => {
        this.roleList = res.data;
      });
    },
  },
  mounted(){
    this.getRole();
    this.searchBtn();
    this.user = JSON.parse(localRead("userInfo"));
  },
}
</script>
